<script setup>
	import { onMounted, ref } from 'vue'
	import {
		onLoad,
		onShow,
		onReachBottom,
		onPullDownRefresh,
	} from '@dcloudio/uni-app'
	import { http } from '@/utils/http.js'
	import { parseTime } from '@/utils/index.js'

	//tab
	const activeIndex = ref(0)
	const offsetTop = ref(0)
	const tabInfo = ref()
	async function categary() {
		// uni.showLoading({
		// 	title: '加载中',
		// })
		const res = await http.request({
			url: '/api/goods/getGoodsClass',
			method: 'POST',
		})
		tabInfo.value = res.data
		// uni.hideLoading()
	}

	function chooseTab(name, title) {
		isYs.value = 0
		iscurrent.value = ''
		sales.value = ''
		price.value = ''
		sort.value = ''
		currentPage.value = 1
		goodsList.value = []
		getgoods()
	}

	//获取商品
	const goodsList = ref([])
	const sort = ref('')
	const currentPage = ref(1)
	const isYs = ref(0)
	const isIntegral = ref(1)
	const keywords = ref('')
	async function getgoods() {
		const res = await http.request({
			url: '/api/goods/getGoods',
			method: 'POST',
			data: {
				page: currentPage.value,
				limit: 10,
				class_id: activeIndex.value,
				keywords: keywords.value,
				order_by: sort.value,
				is_integral:isIntegral.value
			},
		})
		// console.log(res)
		goodsList.value = [...goodsList.value, ...res.data]
		console.log(goodsList.value)
		// goodsList.value = {...goodsList.value,res.data}
	}

	function search(e){
		console.log(e)
		keywords.value = e.value;
		currentPage.value = 1
		goodsList.value = []
		getgoods();
	}

	function chooseIntegral(e){
		isIntegral.value = e;
		currentPage.value = 1
		sort.value = '';
		goodsList.value = []
		getgoods();
	}

	async function hope(id) {
		const res = await http.request({
			url: '/api/goods/scPost',
			method: 'POST',
			data: {
				id: id,
				type: '1',
			},
		})
		console.log(res)
		if (res.st == 1) {
			goodsList.value.forEach((item) => {
				if (item.id == id) {
					if (item.is_sc == 1) {
						--item.sc_num
						item.is_sc = 0
					} else if (item.is_sc == 0) {
						++item.sc_num
						item.is_sc = 1
					}
				}
				console.log(item)
			})
			uni.showToast({
				title: '操作成功',
				duration: 2000,
			})
		} else {
			uni.showToast({
				title: '操作失败',
				icon: 'error',
				duration: 2000,
			})
		}
	}

	// 排序
	const iscurrent = ref('')
	const sales = ref('')
	const price = ref('')
	const add_time = ref('')
	function sorce(now) {
		isYs.value = 0
		goodsList.value = []
		currentPage.value = 1
		iscurrent.value = now
		if (now == 'comprehensive') {
			sales.value = ''
			price.value = ''
			add_time.value = ''
			sort.value = 'comprehensive,desc'
		} else if (now == 'sales_initial') {
			price.value = ''
			add_time.value = ''
			if (sort.value == 'sales_initial,desc') {
				sort.value = 'sales_initial,asc'
				sales.value = 'asc'
			} else if (sort.value == 'sales_initial,asc') {
				sort.value = 'sales_initial,desc'
				sales.value = 'desc'
			} else {
				sort.value = 'sales_initial,desc'
				sales.value = 'desc'
			}
		} else if (now == 'price') {
			sales.value = ''
			add_time.value = ''
			if (sort.value == 'price,desc') {
				sort.value = 'price,asc'
				price.value = 'asc'
			} else if (sort.value == 'price,asc') {
				sort.value = 'price,desc'
				price.value = 'desc'
			} else {
				sort.value = 'price,desc'
				price.value = 'desc'
			}
		} else if (now == 'add_time') {
			sales.value = ''
			price.value = ''
			if (sort.value == 'add_time,desc') {
				sort.value = 'add_time,asc'
				add_time.value = 'asc'
			} else if (sort.value == 'add_time,asc') {
				sort.value = 'add_time,desc'
				add_time.value = 'desc'
			} else {
				sort.value = 'add_time,desc'
				add_time.value = 'desc'
			}
		}
		getgoods()
	}
	function YS() {
		currentPage.value = 1
		goodsList.value = []
		isYs.value = 1
		iscurrent.value = 'ys'
		getgoods()
	}

	// 去看商品详情
	function goMallInfo(id) {
		uni.navigateTo({
			url: `/homePage/goodsinfo/index?id=${id}`,
		})
	}

	onLoad((option) => {
		console.log(option.id)
		// categary()
		activeIndex.value = option.id
	})
	// 上拉加载
	// onReachBottom(() => {
	// })

	function goodsLower() {
		++currentPage.value
		getgoods() // 获取的数据列表
	}
	// 下拉刷新
	// onPullDownRefresh(() => {
	// 	currentPage.value = 1
	// 	goodsList.value = []
	// 	getgoods() // 获取的数据列表
	// 	uni.showToast({
	// 		title: '刷新成功',
	// 		icon: 'success',
	// 		duration: 2000,
	// 	})
	// 	uni.stopPullDownRefresh() // 停止刷新
	// })
	onShow(() => {
		currentPage.value = 1
		goodsList.value = []
		getgoods() // 获取的数据列表
	})
</script>

<template>
	<view class="mall">
		<view class="user-search">
			<!-- <image class="user-img" src="http://shop.happyjia.top/public/wechat_imgs/kapai-test/user-img.png" mode="">
			</image> -->
			<uni-search-bar @confirm="search" @input="input" class="search-style"></uni-search-bar>
		</view>
		<!-- 直购+积分 -->
		<view class="type-choose">
			<view class="left">
				<view class="zhigou-tit" @click="chooseIntegral(1)" :style="isIntegral == 1 ? 'background: rgba(241, 235, 255, 1);':'background: rgba(245, 245, 245, 1);'" >
					<text class="text" :style="isIntegral == 1 ? 'color: #8453ED;':'#808080'">直购</text>
				</view>
			</view>
			
			<view class="left">
				<view class="point" @click="chooseIntegral(2)" :style="isIntegral == 2 ? 'background: rgba(241, 235, 255, 1);':'background: rgba(245, 245, 245, 1);'">
					<text  class="text" :style="isIntegral == 2 ? 'color: #8453ED;':'#808080'">积分</text>
				</view>
			</view>
		</view>
		<view class="content-wrap">
			<!-- 筛选 -->
			<view class="sort">
				<view
					class="sort-item"
					:class="{ active: iscurrent == 'comprehensive' }"
					@click="sorce('comprehensive')"
				>
					综合
				</view>
				<view class="sort-item">
					<view
						:class="{ active: iscurrent == 'add_time' }"
						@click="sorce('add_time')"
					>
						上新
					</view>
					<image
						style="width: 14rpx; height: 24rpx"
						src="../../static/asc.png"
						v-if="add_time == 'asc'"
					></image>
					<image
						style="width: 14rpx; height: 24rpx"
						src="../../static/desc.png"
						v-else-if="add_time == 'desc'"
					></image>
					<image
						style="width: 14rpx; height: 24rpx"
						src="../../static/sort.png"
						v-else
					></image>
				</view>
				<view class="sort-item">
					<view
						:class="{
							active: iscurrent == 'sales_initial',
						}"
						@click="sorce('sales_initial')"
					>
						销量
					</view>
					<image
						style="width: 14rpx; height: 24rpx"
						src="../../static/asc.png"
						v-if="sales == 'asc'"
					></image>
					<image
						style="width: 14rpx; height: 24rpx"
						src="../../static/desc.png"
						v-else-if="sales == 'desc'"
					></image>
					<image
						style="width: 14rpx; height: 24rpx"
						src="../../static/sort.png"
						v-else
					></image>
				</view>
				<view class="sort-item">
					<view
						:class="{ active: iscurrent == 'price' }"
						@click="sorce('price')"
					>
						价格
					</view>
					<image
						style="width: 14rpx; height: 24rpx"
						src="../../static/asc.png"
						v-if="price == 'asc'"
					></image>
					<image
						style="width: 14rpx; height: 24rpx"
						src="../../static/desc.png"
						v-else-if="price == 'desc'"
					></image>
					<image
						style="width: 14rpx; height: 24rpx"
						src="../../static/sort.png"
						v-else
					></image>
				</view>
				<!-- <view
					style="font-size: 24rpx; color: #bbbbbb;"
				>
					仅支持发货不支持退回
				</view> -->
			</view>
			<!-- 商品 -->
			<scroll-view
				style="height: 87vh"
				:scroll-top="scrollTop"
				scroll-y="true"
				class="scroll-Y"
				@scrolltolower="goodsLower"
			>
				<view class="goods">
					<view
						v-for="item in goodsList"
						:key="item.id"
						class="goods-item"
						@click="goMallInfo(item.id)"
					>
						<view class="" style="position: relative">
							<image
								style="
									width: 350rpx;
									height: 350rpx;
									display: block;
								"
								:src="item.img"
							></image>
							<view class="ys-bar" v-if="item.is_ys == 1">
								{{ parseTime(item.ys_time) }} 开售
							</view>
						</view>
						<text class="goods_name">{{
							item.goods_name
						}}</text>
						<view class="price">
							<view
								class=""
								style="
									display: flex;
									align-items: center;
								"
								v-if="item.is_integral == 1"
							>
								<image
									style="
										width: 28rpx;
										height: 28rpx;
										margin-right: 10rpx;
									"
									src="../../static/icon.png"
									mode=""
								></image>
								<text
									style="
										font-size: 26rpx;
										line-height: 28rpx;
										color: #f75b5b;
									"
									>{{ item.integral }}</text
								>
							</view>
							<text
								v-else
								style="font-size: 26rpx; color: #f75b5b"
								>￥{{ item.price }}</text
							>
							<view class="love">
								<uni-icons
									:type="
										item.is_sc == 0
											? 'heart'
											: 'heart-filled'
									"
									:color="
										item.is_sc == 1 ? '#EC5050' : ''
									"
									size="17"
									@tap.stop="hope(item.id)"
								></uni-icons>
								<text
									style="
										font-size: 22rpx;
										padding-left: 8rpx;
										height: 34rpx;
									"
									>{{ item.sc_num }}</text
								>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.mall {
		background-color: #f5f5f5;
		.user-img {
			width: 76rpx;
			height: 76rpx;
			border-radius: 50rpx;
			margin: 30rpx 20rpx 0rpx 34rpx;
		}

		.user-search {
			display: flex;
			width: 100%;
			background-color: #fff;
			height: 130rpx;
		}

		.search-style {
			width: 100%;
			margin-top: 20rpx;
			// border-radius: 50rpx;
		}

		.type-choose {
			display: flex;
			width: 100%;
			height: 90rpx;
			background-color: #fff;
		}

		.zhigou-tit {
			width: 120rpx;
			height: 52rpx;
			// border: 3rpx solid #CEBCF5;
			border-radius: 7rpx;
			text-align: center;
			margin-left: 180rpx;
			// color: #8453ED;
		}
		.point{
			width: 120rpx;
			height: 52rpx;
			// border: 3rpx solid #A6A6A6;
			border-radius: 7rpx;
			text-align: center;
			margin-left: 70rpx;
			// color: #A6A6A6;
		}

		.left {
			/* justify-content: center; */
			display: flex;
			width: 50vw;
			height: 70rpx;
			margin: 10rpx auto;
		}

		.text {
			font-size: 32rpx;
			
			line-height: 52rpx;
			font-weight: bold;

		}

		.star {
			width: 28rpx;
			height: 28rpx;
			padding-right: 30rpx;
		}
		.lable-list{
			display: flex;
			text-align: center;
			background-color: #fff;
			color: #A6A6A6;
			font-size: 28rpx;
		}
	
		.sort {
			display: flex;
			align-items: center;
			width: 95%;
			padding: 22rpx;
			background-color: #fff;
			font-size: 26rpx;
			.sort-item {
				width: 25%;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 34rpx;
			}
		}
		.goods {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			width: 95%;
			padding: 20rpx;
			.goods-item {
				width: 350rpx;
				height: 542rpx;
				margin-bottom: 14rpx;
				background-color: #fff;
				border-radius: 14rpx;
				.ys-bar {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 50rpx;
					background-color: rgba(0, 0, 0, 0.5);
					color: white;
					font-size: 24rpx;
					line-height: 50rpx;
					text-align: center;
				}
				.goods_name {
					height: 74rpx;
					width: 100%;
					padding: 0 8rpx;
					// display: block;
					font-size: 28rpx;
					box-sizing: border-box;

					display: -webkit-box;
					-webkit-line-clamp: 2; /* 限制为两行 */
					-webkit-box-orient: vertical;
					overflow: hidden; /* 隐藏超出部分 */
					text-overflow: ellipsis; /* 超出部分用省略号表示 */
					white-space: normal; /* 允许换行 */
					/* 你可能还想设置一些其他样式，比如宽度、字体大小等 */
				}
				.price {
					width: 100%;
					box-sizing: border-box;
					margin-top: 32rpx;
					padding: 0 8rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.love {
						display: flex;
						align-items: center;
						margin-bottom: 10rpx;
					}
				}
			}
		}
		.active {
			color: $all-color;
		}
	}
	/* #ifdef MP-QQ || MP-BAIDU || MP-TOUTIAO || MP-LARK || MP-KUAISHOU */
	.y-tab-virtual {
		position: relative;
		flex-shrink: 0;
		width: 100%;
	}
	::v-deep .y-tabs__ellipsis {
		overflow: visible !important;
	}
	.content-wrap {
		height: 100vh;
		overflow-y: auto;
		overflow-x: hidden;
	}
	::v-deep .y-tab {
		margin: 0 20rpx;
	}
	::v-deep .y-tab__text {
		font-size: 26rpx;
	}
	::v-deep .y-tabs__bar {
		background-color: #7863ff !important;
	}
</style>
